Component lifecycle events

Posted on 2023-02-05 by

There are 4 lifecycle events in Svelte:

beforeUpdate
onMount
afterUpdate
onDestroy

Here we have a component with a checkbox that if checked displays another component containing these lifecycle events.

App.svelte

<script>
	import Component from "./Component.svelte";
	let condition;
</script>

<input type="checkbox" bind:checked={condition} name="" id="" />

{#if condition}
	<Component />
{/if}

Component.svelte

<script>
	import { onMount, onDestroy, beforeUpdate, afterUpdate } from "svelte";
	let count = 0;
	onMount(() => {
		console.log("onMount");
	});
	onDestroy(() => {
		console.log("onDestroy");
	});
	beforeUpdate(() => {
		console.log("beforeUpdate");
	});
	afterUpdate(() => {
		console.log("afterUpdate");
	});

	function update() {
		count++;
	}
</script>

<button on:click={() => update()}>Click me</button>
{count}

If we toggle it we can see that the lifecycle events run in this order: beforeUpdate, onMount, afterUpdate when it is checked and onDestroy when the check is removed and the component disappears.

If we check the checkbox and click the button beforeUpdate and afterUpdate will run each time we click the button.

If we update the state in afterUpdate it could lead to infinite loops (since it would trigger another update) so Svelte only runs the afterUpdate event once to prevent this.

Another thing to note is that these events need to be at the top level because they are run when the component initializes.

We could though put the lifecycle event in a function and then run the function as long as it's still in the top level. This could help if we have many components sharing the same lifecycle logic.

Component2.svelte

<script>
	import { onDestroy, beforeUpdate, afterUpdate } from "svelte";
	import { foo } from "./foo";
	let count = 0;

	// this will run onMount() from foo.js
	foo();

	onDestroy(() => {
		console.log("onDestroy");
	});
	beforeUpdate(() => {
		console.log("beforeUpdate");
	});
	afterUpdate(() => {
		console.log("afterUpdate");
	});

	function update() {
		count++;
	}
</script>

<button on:click={() => update()}>Click me</button>
{count}

foo.js

import { onMount } from "svelte";
export function foo() {
	onMount(() => {
		console.log("onMount");
	});
}

In the next example we have a file called markUpdate.js which will add outlines to our button using an action .

… we will talk more about this later (I hope).

Component3.svelte

<script>
	import { onDestroy, beforeUpdate, afterUpdate } from "svelte";
	import markUpdate from "./markUpdate";
	let count = 0;

	const action = markUpdate();

	onDestroy(() => {
		console.log("onDestroy");
	});
	beforeUpdate(() => {
		console.log("beforeUpdate");
	});
	afterUpdate(() => {
		console.log("afterUpdate");
	});

	function update() {
		count++;
	}
</script>

<button use:action on:click={() => update()}>Click me</button>
{count}

markUpdate.js

import { beforeUpdate, onMount } from "svelte";

export default function () {
	let elements = new Set();

	beforeUpdate(() => {
		elements.forEach((element) => {
			element.style.outlineColor = "red";
			setTimeout(() => {
				if (elements.has(element)) {
					element.style.outlineColor = "black";
				}
			}, 1000);
		});
	});

	onMount(() => {
		elements.forEach((element) => {
			element.style.outline = "2px solid black";
			element.style.margin = "8px";
		});
	});

	return function markUpdateAction(node) {
		elements.add(node);
		return {
			destroy() {
				elements.delete(node);
			},
		};
	};
}